<template>
  <a-card>
    <!-- 查询   -->
    <a-form
        ref="searchFormRef"
        :model="search_form"
        @submit="handleSearchSubmit"
        :label-col-props="{ span: 6 }"
        :wrapper-col-props="{ span: 18 }"
        label-align="left">
      <a-row>
        <a-col :flex="1">
          <a-row :gutter="16">
            <a-col :span="8">
              <a-form-item label="出发地" field="startLocationWbxqy">
                <a-input placeholder="请输入出发地" v-model="search_form.startLocationWbxqy"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="目的地" field="endLocationWbxqy">
                <a-input placeholder="请输入目的地" v-model="search_form.endLocationWbxqy"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="行程状态" field="tripStatusWbxqy">
                <a-select :style="{width:'320px'}" placeholder="请选择行程状态" allow-create allow-clear
                          v-model="search_form.tripStatusWbxqy">
                  <a-option value="pending">待出行</a-option>
                  <a-option value="ongoing">进行中</a-option>
                  <a-option value="completed">已完成</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
            </a-col>
            <a-col :span="8">
            </a-col>
          </a-row>
        </a-col>
        <a-divider style="height: 84px" direction="vertical"/>
        <a-col :flex="'86px'" style="text-align: right">
          <a-space direction="vertical" :size="18">
            <a-button type="primary" html-type="submit">
              <template #icon>
                <icon-search/>
              </template>
              查询
            </a-button>
            <a-button @click="$refs.searchFormRef.resetFields()">
              <template #icon>
                <icon-refresh/>
              </template>
              重置
            </a-button>
          </a-space>
        </a-col>
      </a-row>
      <!-- 添加操作   -->
      <a-row>
        <a-col :span="2" style="padding-bottom: 10px">
          <a-space>
            <a-button shape="round" disabled>
              导出表格
            </a-button>
          </a-space>
        </a-col>
        <a-col :span="12" class="mb-1"></a-col>
      </a-row>
    </a-form>
    <!-- 信息展示   -->
    <a-table :columns="columns" :data="trips"
             :pagination="pagination"
             @page-change="handlePaginationChange" style="height: 70vh">
      <template #startLocationWbxqy="{record,rowIndex}">
        <span>{{ record.startLocationWbxqy }}</span>
      </template>
      <template #endLocationWbxqy="{record,rowIndex}">
        <span>{{ record.endLocationWbxqy }}</span>
      </template>
      <template #user="{record,rowIndex}">
        <a-descriptions :column="1">
          <a-descriptions-item label="姓名">
            {{ record.carRequest.user.usernameWbxqy }}
          </a-descriptions-item>
          <a-descriptions-item label="电话">
            {{ record.carRequest.user.phoneNumberWbxqy }}
          </a-descriptions-item>
          <a-descriptions-item label="头像">
            <a-avatar
                shape="square"
                :size="32">
              <img
                  alt="avatar"
                  :src="record.carRequest.user?.avatarUrlWbxqy"
              />
            </a-avatar>
          </a-descriptions-item>
        </a-descriptions>
      </template>
      <template #car="{record,rowIndex}">
        <a-descriptions :column="1">
          <a-descriptions-item label="车牌">
            {{ record?.carRequest?.car?.licensePlateWbxqy }}
          </a-descriptions-item>
          <a-descriptions-item>

          </a-descriptions-item>
          <a-descriptions-item label="照片">
            <a-avatar
                shape="square"
                :size="32">
              <img
                  alt="avatar"
                  :src="record?.carRequest?.car?.imageUrlWbxqy"
              />
            </a-avatar>
          </a-descriptions-item>
        </a-descriptions>
      </template>
      <template #driver="{record,rowIndex}">
        <a-descriptions :column="1">
          <a-descriptions-item label="姓名">
            {{ record.carRequest.driver?.usernameWbxqy }}
          </a-descriptions-item>
          <a-descriptions-item label="电话">
            {{ record.carRequest.driver?.phoneNumberWbxqy }}
          </a-descriptions-item>
          <a-descriptions-item label="头像">
            <a-avatar
                shape="square"
                :size="32">
              <img
                  alt="avatar"
                  :src="record.carRequest.driver?.avatarUrlWbxqy"
              />
            </a-avatar>
          </a-descriptions-item>
        </a-descriptions>
      </template>
      <template #startTimeWbxqy="{record,rowIndex}">
        <p>{{ (record.startTimeWbxqy||'').split("T")[0] }}</p>
        <p>{{ (record.startTimeWbxqy||'').split("T")[1] }}</p>
      </template>
      <template #endTimeWbxqy="{record,rowIndex}">
        <p>{{ (record.startTimeWbxqy||'').split("T")[0] }}</p>
        <p>{{ (record.startTimeWbxqy||'').split("T")[1] }}</p>
      </template>
      <template #tripStatusWbxqy="{record,rowIndex}">
        <a-tag v-if="record.tripStatusWbxqy==='S'"
               style="border-radius: 20px; background-color: #FFD700;color:black">
          待出行
        </a-tag>
        <a-tag v-else-if="record.tripStatusWbxqy==='I'"
               style="border-radius: 20px; background-color: #32CD32;color:white">
          进行中
        </a-tag>
        <a-tag v-else-if="record.tripStatusWbxqy==='E'"
               style="border-radius: 20px; background-color: #808080;color:white">
          已完成
        </a-tag>
      </template>
      <template #operations="{record,rowIndex}">
        <a-space>
          <a-button
              type="outline" @click="editTripOpen(record)">
            <template #icon>
              <icon-edit/>
            </template>
            编辑
          </a-button>
        </a-space>
      </template>
    </a-table>
    <!-- 编辑行程对话框   -->
    <a-modal v-model:visible="showEditTripModal" title="编辑行程" @before-ok="editTripOk"
             @cancel="editTripCancel">
      <a-form ref="editTripFormRef" :model="editTripForm" :rules="rules">
        <a-form-item label="出发地" field="startLocationWbxqy">
          <a-input v-model="editTripForm.startLocationWbxqy"/>
        </a-form-item>
        <a-form-item label="目的地" field="endLocationWbxqy">
          <a-input v-model="editTripForm.endLocationWbxqy"/>
        </a-form-item>
        <a-form-item label="出发时间" field="startTimeWbxqy">
          <a-date-picker v-model="editTripForm.startTimeWbxqy" format="YYYY-MM-DD HH:mm:ss"/>
        </a-form-item>
        <a-form-item label="到达时间" field="endTimeWbxqy">
          <a-date-picker v-model="editTripForm.endTimeWbxqy" format="YYYY-MM-DD HH:mm:ss"/>
        </a-form-item>
        <a-form-item label="行驶距离(km)" field="distanceWbxqy">
          <a-input-number v-model="editTripForm.distanceWbxqy" :min="0" :max="10000"/>
        </a-form-item>
        <a-form-item label="行程状态" field="tripStatusWbxqy">
          <a-select v-model="editTripForm.tripStatusWbxqy">
            <a-option value="S">待出行</a-option>
            <a-option value="I">进行中</a-option>
            <a-option value="E">已完成</a-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </a-card>
</template>

<script setup>
import {ref, reactive, onMounted} from 'vue';
import {Message} from '@arco-design/web-vue';
import {getAllTrips, addTrip, updateTrip, deleteTrip} from '@/api/tripMG.js';
import {updateUser} from "@/api/userMG";

const columns = [
  {title: '出发地', dataIndex: 'startLocationWbxqy', slotName: 'startLocationWbxqy'},
  {title: '目的地', dataIndex: 'endLocationWbxqy', slotName: 'endLocationWbxqy'},
  {
    title: "申请人",
    dataIndex: "user",
    slotName: "user"
  },
  {
    title: "分配车辆",
    dataIndex: "car",
    slotName: "car"
  },
  {
    title: "分配司机",
    dataIndex: "driver",
    slotName: "driver"
  },
  {title: '出发时间', dataIndex: 'startTimeWbxqy', slotName: 'startTimeWbxqy'},
  {title: '到达时间', dataIndex: 'endTimeWbxqy', slotName: 'endTimeWbxqy'},
  {title: '行驶距离(km)', dataIndex: 'distanceWbxqy', slotName: 'distanceWbxqy'},
  {title: '行程状态', dataIndex: 'tripStatusWbxqy', slotName: 'tripStatusWbxqy'},
  {title: '操作', dataIndex: 'operations', slotName: 'operations'}
];

const trips = ref([]);
const pagination = reactive({current: 1, pageSize: 10, total: 0});
const search_form = reactive({startLocationWbxqy: '', endLocationWbxqy: '', tripStatusWbxqy: ''});
const editTripForm = reactive({
  tripIdWbxqy: '',
  startLocationWbxqy: '',
  endLocationWbxqy: '',
  startTimeWbxqy: '',
  endTimeWbxqy: '',
  distanceWbxqy: '',
  tripStatusWbxqy: ''
});

const rules = {
  startLocationWbxqy: [{required: true, message: '请填写出发地', trigger: 'blur'}],
  endLocationWbxqy: [{required: true, message: '请填写目的地', trigger: 'blur'}],
  startTimeWbxqy: [{required: true, message: '请填写出发时间', trigger: 'blur'}],
  endTimeWbxqy: [{required: true, message: '请填写到达时间', trigger: 'blur'}],
  distanceWbxqy: [{required: true, message: '请填写行驶距离', trigger: 'blur'}],
  tripStatusWbxqy: [{required: true, message: '请填写行程状态', trigger: 'blur'}]
};

const showEditTripModal = ref(false);
const editTripFormRef = ref()
const handlePaginationChange = async (page) => {
  pagination.current = page;
  await handleSearchSubmit();
};
const handleSearchSubmit = async () => {
  const {startLocationWbxqy, endLocationWbxqy, tripStatusWbxqy} = search_form;
  const {current, pageSize} = pagination;
  const params = {page: current, pageSize, startLocationWbxqy, endLocationWbxqy, tripStatusWbxqy};
  const data = await getAllTrips(params);
  trips.value = data.records;
  pagination.total = data.total;
};
const editTripOk = async (done) => {
  //进行表单校验
  const res = await editTripFormRef.value.validate();
  if (res) {
    done(false);
    return;
  }
  // 清除值为空的属性
  for (const key in editTripForm) {
    if (editTripForm[key] === '') {
      delete editTripForm[key];
    }
  }
  await updateTrip(editTripForm).then(res => {
    done()
    Message.success({
      content: "数据更新成功",
      duration: "3000"
    })
    // 清空数据
    editTripFormRef.value.resetFields()
    // 初始加载数据
    handleSearchSubmit()
  }).catch(error => {
    done(false)
    this.$message.error(error)
  })

};
const editTripCancel = () => {
  showEditTripModal.value = false;
};

const editTripOpen = (record) => {
  Object.assign(editTripForm, record);
  showEditTripModal.value = true;
};

onMounted(async () => {
  await handleSearchSubmit();
});
</script>


<style scoped>
.mb-1 {
  margin-bottom: 10px;
}
</style>
